<template>
    <div class="echarts-gauge-group">
      <div class="chart-col">
        <echartsGaugeLeft></echartsGaugeLeft>
      </div>
      <div class="chart-col">
        <svg class="svgCircle" version="1.1" id="图层_1"  x="0px" y="0px" viewBox="0 0 280 280" style="enable-background:new 0 0 280 280;" xml:space="preserve">
          <g>
            <rect x="143" y="5" width="1" height="7"/>
            <rect x="136.1" y="5" transform="matrix(0.9986 -5.233751e-02 5.233751e-02 0.9986 -0.2587 7.1601)" width="1" height="7"/>
            <rect x="129.2" y="5.4" transform="matrix(0.9945 -0.1045 0.1045 0.9945 -0.2228 13.6019)" width="1" height="7"/>
            <rect x="122.4" y="6.1" transform="matrix(0.9877 -0.1564 0.1564 0.9877 7.496093e-03 19.3392)" width="1" height="7"/>
            <rect x="115.6" y="7.1" transform="matrix(0.9781 -0.2079 0.2079 0.9781 0.3289 24.3655)" width="1" height="7"/>
            <rect x="108.8" y="8.6" transform="matrix(0.9659 -0.2588 0.2588 0.9659 0.584 28.7007)" width="1" height="7"/>
            <rect x="102.2" y="10.4" transform="matrix(0.9511 -0.309 0.309 0.9511 0.7259 32.4183)" width="1" height="7"/>
            <rect x="95.6" y="12.5" transform="matrix(0.9336 -0.3584 0.3584 0.9336 0.6395 35.5093)" width="1" height="7"/>
            <rect x="89.2" y="14.9" transform="matrix(0.9136 -0.4067 0.4067 0.9136 0.2567 38.0662)" width="1" height="7"/>
            <rect x="82.9" y="17.7" transform="matrix(0.891 -0.454 0.454 0.891 -0.55 40.1691)" width="1" height="7"/>
            <rect x="76.8" y="20.9" transform="matrix(0.866 -0.5 0.5 0.866 -1.8431 41.9263)" width="1" height="7"/>
            <rect x="70.8" y="24.3" transform="matrix(0.8387 -0.5446 0.5446 0.8387 -3.6551 43.3192)" width="1" height="7"/>
            <rect x="65" y="28.1" transform="matrix(0.809 -0.5878 0.5878 0.809 -6.074 44.5623)" width="1" height="7"/>
            <rect x="59.5" y="32.1" transform="matrix(0.7771 -0.6293 0.6293 0.7771 -9.0296 45.6861)" width="1" height="7"/>
            <rect x="54.1" y="36.4" transform="matrix(0.7431 -0.6691 0.6691 0.7431 -12.6985 46.7782)" width="1" height="7"/>
            <rect x="49" y="41" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -16.9882 48.0225)" width="1" height="7"/>
            <rect x="44.1" y="45.9" transform="matrix(0.6691 -0.7431 0.7431 0.6691 -21.9747 49.5007)" width="1" height="7"/>
            <rect x="39.5" y="51" transform="matrix(0.6293 -0.7771 0.7771 0.6293 -27.5521 51.2882)" width="1" height="7"/>
            <rect x="35.2" y="56.4" transform="matrix(0.5878 -0.809 0.809 0.5878 -33.7185 53.577)" width="1" height="7"/>
            <rect x="31.1" y="61.9" transform="matrix(0.5446 -0.8387 0.8387 0.5446 -40.5035 56.2912)" width="1" height="7"/>
            <rect x="27.4" y="67.7" transform="matrix(0.5 -0.866 0.866 0.5 -47.7134 59.7354)" width="1" height="7"/>
            <rect x="23.9" y="73.7" transform="matrix(0.454 -0.891 0.891 0.454 -55.4556 63.9354)" width="1" height="7"/>
            <rect x="20.8" y="79.8" transform="matrix(0.4067 -0.9136 0.9136 0.4067 -63.4743 68.8704)" width="1" height="7"/>
            <rect x="18" y="86.1" transform="matrix(0.3584 -0.9336 0.9336 0.3584 -71.7769 74.7604)" width="1" height="7"/>
            <rect x="15.5" y="92.5" transform="matrix(0.309 -0.9511 0.9511 0.309 -80.2876 81.5782)" width="1" height="7"/>
            <rect x="13.4" y="99.1" transform="matrix(0.2588 -0.9659 0.9659 0.2588 -88.7654 89.4691)" width="1" height="7"/>
            <rect x="11.6" y="105.7" transform="matrix(0.2079 -0.9781 0.9781 0.2079 -97.2775 98.3291)" width="1" height="7"/>
            <rect x="10.2" y="112.4" transform="matrix(0.1564 -0.9877 0.9877 0.1564 -105.4707 108.3872)" width="1" height="7"/>
            <rect x="9.1" y="119.3" transform="matrix(0.1045 -0.9945 0.9945 0.1045 -113.4639 119.5)" width="1" height="7"/>
            <rect x="8.4" y="126.1" transform="matrix(5.233749e-02 -0.9986 0.9986 5.233749e-02 -121.012 131.6397)" width="1" height="7"/>
            <rect x="5" y="136" width="7" height="1"/>
            <rect x="5" y="142.9" transform="matrix(0.9986 -5.233749e-02 5.233749e-02 0.9986 -7.4922 0.6424)" width="7" height="1"/>
            <rect x="5.4" y="149.7" transform="matrix(0.9945 -0.1045 0.1045 0.9945 -15.6487 1.7522)" width="7" height="1"/>
            <rect x="6.1" y="156.6" transform="matrix(0.9877 -0.1564 0.1564 0.9877 -24.4498 3.4298)" width="7" height="1"/>
            <rect x="7.1" y="163.5" transform="matrix(0.9781 -0.2079 0.2079 0.9781 -33.8554 5.7961)" width="7" height="1"/>
            <rect x="8.6" y="170.1" transform="matrix(0.9659 -0.2588 0.2588 0.9659 -43.7415 8.9503)" width="7" height="1"/>
            <rect x="10.4" y="176.8" transform="matrix(0.9511 -0.309 0.309 0.9511 -54.0911 12.955)" width="7" height="1"/>
            <rect x="12.5" y="183.3" transform="matrix(0.9336 -0.3584 0.3584 0.9336 -64.8075 17.9539)" width="7" height="1"/>
            <rect x="15" y="189.8" transform="matrix(0.9136 -0.4067 0.4067 0.9136 -75.808 23.9683)" width="7" height="1"/>
            <rect x="17.8" y="196.1" transform="matrix(0.891 -0.454 0.454 0.891 -86.9315 31.0942)" width="7" height="1"/>
            <rect x="20.8" y="202.2" transform="matrix(0.866 -0.5 0.5 0.866 -98.0811 39.3263)" width="7" height="1"/>
            <rect x="24.3" y="208.2" transform="matrix(0.8387 -0.5446 0.5446 0.8387 -109.1493 48.823)" width="7" height="1"/>
            <rect x="28.1" y="213.9" transform="matrix(0.809 -0.5878 0.5878 0.809 -119.9835 59.5015)" width="7" height="1"/>
            <rect x="32.1" y="219.5" transform="matrix(0.7771 -0.6293 0.6293 0.7771 -130.5506 71.4285)" width="7" height="1"/>
            <rect x="36.5" y="224.9" transform="matrix(0.7431 -0.6691 0.6691 0.7431 -140.5525 84.636)" width="7" height="1"/>
            <rect x="41.1" y="230" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -149.9488 99.0326)" width="7" height="1"/>
            <rect x="45.9" y="234.9" transform="matrix(0.6691 -0.7431 0.7431 0.6691 -158.5501 114.6037)" width="7" height="1"/>
            <rect x="51.1" y="239.5" transform="matrix(0.6293 -0.7771 0.7771 0.6293 -166.281 131.3489)" width="7" height="1"/>
            <rect x="56.3" y="243.8" transform="matrix(0.5878 -0.809 0.809 0.5878 -172.9797 149.12)" width="7" height="1"/>
            <rect x="62" y="247.9" transform="matrix(0.5446 -0.8387 0.8387 0.5446 -178.4691 168.0211)" width="7" height="1"/>
            <rect x="67.7" y="251.6" transform="matrix(0.5 -0.866 0.866 0.5 -182.7519 187.7501)" width="7" height="1"/>
            <rect x="73.7" y="255" transform="matrix(0.454 -0.891 0.891 0.454 -185.5291 208.2801)" width="7" height="1"/>
            <rect x="79.8" y="258.2" transform="matrix(0.4067 -0.9136 0.9136 0.4067 -186.9063 229.6026)" width="7" height="1"/>
            <rect x="86.1" y="261" transform="matrix(0.3584 -0.9336 0.9336 0.3584 -186.6164 251.4319)" width="7" height="1"/>
            <rect x="92.6" y="263.4" transform="matrix(0.309 -0.9511 0.9511 0.309 -184.6375 273.7423)" width="7" height="1"/>
            <rect x="99.1" y="265.6" transform="matrix(0.2588 -0.9659 0.9659 0.2588 -181.0152 296.2938)" width="7" height="1"/>
            <rect x="105.8" y="267.4" transform="matrix(0.2079 -0.9781 0.9781 0.2079 -175.4812 319.0687)" width="7" height="1"/>
            <rect x="112.4" y="268.8" transform="matrix(0.1564 -0.9877 0.9877 0.1564 -168.2234 341.6997)" width="7" height="1"/>
            <rect x="119.2" y="269.9" transform="matrix(0.1045 -0.9945 0.9945 0.1045 -159.0127 364.2018)" width="7" height="1"/>
            
            <rect x="126.1" y="270.6" transform="matrix(5.233751e-02 -0.9986 0.9986 5.233751e-02 -147.9239 386.4151)" width="7" height="1"/>
            <rect x="136" y="268" width="1" height="7"/>
            <rect x="142.9" y="268" transform="matrix(0.9986 -5.233751e-02 5.233751e-02 0.9986 -14.0121 7.8754)" width="1" height="7"/>
            <rect x="149.7" y="267.7" transform="matrix(0.9945 -0.1045 0.1045 0.9945 -27.5144 17.1842)" width="1" height="7"/>
            <rect x="156.6" y="266.9" transform="matrix(0.9877 -0.1564 0.1564 0.9877 -40.3584 27.9017)" width="1" height="7"/>
            <rect x="163.4" y="265.8" transform="matrix(0.9781 -0.2079 0.2079 0.9781 -52.4046 39.9644)" width="1" height="7"/>
            <rect x="170.1" y="264.4" transform="matrix(0.9659 -0.2588 0.2588 0.9659 -63.5297 53.283)" width="1" height="7"/>
            <rect x="176.8" y="262.6" transform="matrix(0.9511 -0.309 0.309 0.9511 -73.5573 67.8082)" width="1" height="7"/>
            <rect x="183.3" y="260.5" transform="matrix(0.9336 -0.3584 0.3584 0.9336 -82.4135 83.4072)" width="1" height="7"/>
            <rect x="189.8" y="258" transform="matrix(0.9136 -0.4067 0.4067 0.9136 -89.9068 99.9864)" width="1" height="7"/>
            <rect x="196" y="255.2" transform="matrix(0.891 -0.454 0.454 0.891 -96.0284 117.4173)" width="1" height="7"/>
            <rect x="202.2" y="252.1" transform="matrix(0.866 -0.5 0.5 0.866 -100.6536 135.6166)" width="1" height="7"/>
            <rect x="208.1" y="248.6" transform="matrix(0.8387 -0.5446 0.5446 0.8387 -103.6632 154.2988)" width="1" height="7"/>
            <rect x="213.9" y="245" transform="matrix(0.809 -0.5878 0.5878 0.809 -105.1007 173.4998)" width="1" height="7"/>
            <rect x="219.5" y="240.9" transform="matrix(0.7771 -0.6293 0.6293 0.7771 -104.7368 192.9389)" width="1" height="7"/>
            <rect x="224.8" y="236.5" transform="matrix(0.7431 -0.6691 0.6691 0.7431 -102.7251 212.4391)" width="1" height="7"/>
            <rect x="230" y="231.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -98.9504 231.9052)" width="1" height="7"/>
            <rect x="234.8" y="227.1" transform="matrix(0.6691 -0.7431 0.7431 0.6691 -93.4774 251.1838)" width="1" height="7"/>
            <rect x="239.4" y="221.9" transform="matrix(0.6293 -0.7771 0.7771 0.6293 -86.2516 270.0357)" width="1" height="7"/>
            <rect x="243.8" y="216.6" transform="matrix(0.5878 -0.809 0.809 0.5878 -77.3373 288.3834)" width="1" height="7"/>
            <rect x="247.8" y="211" transform="matrix(0.5446 -0.8387 0.8387 0.5446 -66.86 305.9493)" width="1" height="7"/>
            <rect x="251.6" y="205.2" transform="matrix(0.5 -0.866 0.866 0.5 -54.7035 322.6797)" width="1" height="7"/>
            <rect x="255" y="199.3" transform="matrix(0.454 -0.891 0.891 0.454 -41.1859 338.4327)" width="1" height="7"/>
            <rect x="258.2" y="193.1" transform="matrix(0.4067 -0.9136 0.9136 0.4067 -26.1789 352.9795)" width="1" height="7"/>
            <rect x="261" y="186.9" transform="matrix(0.3584 -0.9336 0.9336 0.3584 -9.9607 366.2276)" width="1" height="7"/>
            <rect x="263.4" y="180.5" transform="matrix(0.309 -0.9511 0.9511 0.309 7.3923 378.111)" width="1" height="7"/>
            <rect x="265.6" y="173.9" transform="matrix(0.2588 -0.9659 0.9659 0.2588 25.8892 388.5142)" width="1" height="7"/>
            <rect x="267.3" y="167.2" transform="matrix(0.2079 -0.9781 0.9781 0.2079 45.1473 397.2178)" width="1" height="7"/>
            <rect x="268.8" y="160.5" transform="matrix(0.1564 -0.9877 0.9877 0.1564 65.2327 404.3664)" width="1" height="7"/>
            <rect x="269.9" y="153.7" transform="matrix(0.1045 -0.9945 0.9945 0.1045 85.8116 409.7065)" width="1" height="7"/>
            <rect x="270.6" y="146.8" transform="matrix(5.233749e-02 -0.9986 0.9986 5.233749e-02 106.7766 413.1629)" width="1" height="7"/>
            <rect x="268" y="143" width="7" height="1"/>
            <rect x="268" y="136.1" transform="matrix(0.9986 -5.233749e-02 5.233749e-02 0.9986 -6.7769 14.3958)" width="7" height="1"/>
            <rect x="267.6" y="129.2" transform="matrix(0.9945 -0.1045 0.1045 0.9945 -12.0664 29.0438)" width="7" height="1"/>
            <rect x="266.9" y="122.4" transform="matrix(0.9877 -0.1564 0.1564 0.9877 -15.8873 43.7957)" width="7" height="1"/>
            <rect x="265.8" y="115.6" transform="matrix(0.9781 -0.2079 0.2079 0.9781 -18.2564 58.5295)" width="7" height="1"/>
            <rect x="264.4" y="108.8" transform="matrix(0.9659 -0.2588 0.2588 0.9659 -19.1592 73.064)" width="7" height="1"/>
            <rect x="262.6" y="102.2" transform="matrix(0.9511 -0.309 0.309 0.9511 -18.7012 87.2383)" width="7" height="1"/>
            <rect x="260.5" y="95.6" transform="matrix(0.9336 -0.3584 0.3584 0.9336 -16.9096 101.0068)" width="7" height="1"/>
            <rect x="258" y="89.2" transform="matrix(0.9136 -0.4067 0.4067 0.9136 -13.8879 114.1318)" width="7" height="1"/>
            <rect x="255.3" y="83" transform="matrix(0.891 -0.454 0.454 0.891 -9.6833 126.5726)" width="7" height="1"/>
            <rect x="252.1" y="76.8" transform="matrix(0.866 -0.5 0.5 0.866 -4.3909 138.1367)" width="7" height="1"/>
            <rect x="248.7" y="70.8" transform="matrix(0.8387 -0.5446 0.5446 0.8387 1.8303 148.8311)" width="7" height="1"/>
            <rect x="244.9" y="65" transform="matrix(0.809 -0.5878 0.5878 0.809 8.954 158.5281)" width="7" height="1"/>
            <rect x="240.8" y="59.5" transform="matrix(0.7771 -0.6293 0.6293 0.7771 16.7022 167.1356)" width="7" height="1"/>
            <rect x="236.6" y="54.1" transform="matrix(0.7431 -0.6691 0.6691 0.7431 25.1084 174.6626)" width="7" height="1"/>
            <rect x="231.9" y="49" transform="matrix(0.7071 -0.7071 0.7071 0.7071 33.934 180.9948)" width="7" height="1"/>
            <rect x="227.1" y="44.1" transform="matrix(0.6691 -0.7431 0.7431 0.6691 43.133 186.1063)" width="7" height="1"/>
            <rect x="222" y="39.5" transform="matrix(0.6293 -0.7771 0.7771 0.6293 52.4667 190.0485)" width="7" height="1"/>
            <rect x="216.6" y="35.2" transform="matrix(0.5878 -0.809 0.809 0.5878 61.8268 192.7388)" width="7" height="1"/>
            <rect x="211.1" y="31.1" transform="matrix(0.5446 -0.8387 0.8387 0.5446 71.1891 194.3775)" width="7" height="1"/>
            <rect x="205.2" y="27.4" transform="matrix(0.5 -0.866 0.866 0.5 80.1923 194.7402)" width="7" height="1"/>
            <rect x="199.3" y="23.9" transform="matrix(0.454 -0.891 0.891 0.454 88.9683 194.0103)" width="7" height="1"/>
            <rect x="193.2" y="20.8" transform="matrix(0.4067 -0.9136 0.9136 0.4067 97.2028 192.3072)" width="7" height="1"/>
            <rect x="186.9" y="18" transform="matrix(0.3584 -0.9336 0.9336 0.3584 104.8507 189.6157)" width="7" height="1"/>
            <rect x="180.5" y="15.5" transform="matrix(0.309 -0.9511 0.9511 0.309 111.8954 186.0624)" width="7" height="1"/>
            <rect x="173.9" y="13.4" transform="matrix(0.2588 -0.9659 0.9659 0.2588 118.03 181.6394)" width="7" height="1"/>
            <rect x="167.3" y="11.6" transform="matrix(0.2079 -0.9781 0.9781 0.2079 123.4076 176.6439)" width="7" height="1"/>
            <rect x="160.5" y="10.2" transform="matrix(0.1564 -0.9877 0.9877 0.1564 127.7559 170.9963)" width="7" height="1"/>
            <rect x="153.7" y="9.1" transform="matrix(0.1045 -0.9945 0.9945 0.1045 131.1939 164.9264)" width="7" height="1"/>
            <rect x="146.9" y="8.4" transform="matrix(5.233751e-02 -0.9986 0.9986 5.233751e-02 133.5994 158.6264)" width="7" height="1"/>
          </g>
        </svg>
        <echartsGaugeCenter></echartsGaugeCenter>
      </div>
      <div class="chart-col">
        <echartsGaugeRight></echartsGaugeRight>
      </div>
      
    </div>
  
</template>
<script>
export default {
  name: "blockCenter",
  components: {
    echartsGaugeLeft:() => import('./guageGroup/echarts-gaugeBLeft'),
    echartsGaugeCenter:() => import('./guageGroup/echarts-gaugeA'),
    echartsGaugeRight:() => import('./guageGroup/echarts-gaugeBRight'),
  },
  data(){return{

  }}, 
  computed:{}, 
  methods:{}, 
  mounted(){},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.echarts-gauge-group{height: 100%;display:flex;
  .chart-col{height: 100%;  position: relative;
    &:nth-child(1){width: 30%;}
    &:nth-child(2){width: 40%;}
    &:nth-child(3){width: 30%;}
  }
  .svgCircle{fill:var(--tech-deco_B);width: 98%;  height: 98%; position: absolute; left:50%; top:50%; .fixc("xy");
    animation: rotateCircle 20s linear infinite; 
  }
  &.noAni{.svgCircle{animation: none;} }  
  @keyframes rotateCircle{
    0% { transform: translateX(-50%) translateY(-50%) rotate(0deg); }
    //50% { opacity: 0.3; }
    100% {transform: translateX(-50%) translateY(-50%) rotate(360deg);}
  }
}

</style>
